;(function () {

    // echarts第一步
    const chartWrapper = document.querySelector('.user-count-wrapper .chart');
     // 生成echarts实例
    const chart = echarts.init(chartWrapper);
    
    // echarts第二步
    // 写option配置项
    const option = {
        grid: {
            top: 10,
            right: 1,
            bottom: 20,
            // left: 0, // 不给left的话  left将会根据数据自适应
        },
        color: [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#fff7e6' // 0% 处的颜色
                }, {
                    offset: 1, color: '#ffc069' // 100% 处的颜色
                }],
            },
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            backgroundColor: 'rgba(0, 0, 0, .5)',
            borderWidth: 0,
            textStyle: {
                color: '#ffffff',
            },
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: `rgba(${ 13 * 16 + 4 }, ${ 6 * 16 + 11 }, ${ 8 }, .3)`,
                },
            },
            axisLabel: {
                color: '#ffd591',
            },
            axisTick: {
                show: false,
            },
            data: userCount
            .sort(function (a, b) {
                return b.count - a.count;
            })
            .map(function (item) {
                return item.city;
            }),
        },
        yAxis: [
            {
                splitNumber: 5,
                type: 'value',
                splitLine: {
                    lineStyle: {
                        // color: '#d46b08',
                        color: `rgba(${ 13 * 16 + 4 }, ${ 6 * 16 + 11 }, ${ 8 }, .3)`,
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: `rgba(${ 13 * 16 + 4 }, ${ 6 * 16 + 11 }, ${ 8 }, .3)`,
                    },
                },
                axisLabel: {
                    color: '#ffd591',
                },
            },
            {
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: `rgba(${ 13 * 16 + 4 }, ${ 6 * 16 + 11 }, ${ 8 }, .3)`,
                    },
                },
            },
        ],
        series: [
            {
                data: userCount.map(function (item) {
                    return item.count;
                }).sort(function (a, b) {
                    return b - a;
                }),
                type: 'bar'
            },
        ],
    };
    
    // echarts第三步
    // 导入配置项
    chart.setOption(option);

    $('.test').text(num2thousand(userCountTotal.total));
    
})();